<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'
import type { NVideoMoreListProps } from '@/components/types/types'

const items = ref([
  '选项1',
  '选项2',
  '选项3',
  '选项4',
  '选项5',
  '选项6',
  '选项7',
  '选项8',
  '选项9',
  '选项10',
])
const current = ref(0)
const search = ref('')
const onClickItem = (event: any) => {
  current.value = event.currentIndex
}

const propsOptions: NVideoMoreListProps = reactive({
  loadStatus: 'more',
  currentPage: 1,
  pageSize: 10,
  list: [
    {
      id: '1',
      title: '课程标题',
      describe: '这是一段描述的话水水水水水水水，测试',
      time: '2024-01-01',
      image:
        'https://ts1.cn.mm.bing.net/th/id/R-C.c4a61dd4df197e12055eba611b9e6337?rik=mWmkGXADBB2hUA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50066%2f7706.jpg_wh860.jpg&ehk=Dm%2bzKOFKX31KRvQbuTlKw77nJQBu7lxDn7J%2bn0YiyJg%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      id: '2',
      title: '课程标题',
      describe: '这是一段描述的话水水水水水水水，测试',
      time: '2024-01-01',
      image: 'https://img95.699pic.com/photo/40168/8382.jpg_wh860.jpg',
    },
    {
      id: '3',
      title: '课程标题',
      describe: '这是一段描述的话水水水水水水水，测试',
      time: '2024-01-01',
      image: 'https://pic.ibaotu.com/00/94/62/35x888piC6c4.jpg-0.jpg!fw700',
    },
    {
      id: '4',
      title: '课程标题',
      describe: '这是一段描述的话水水水水水水水，测试',
      time: '2024-01-01',
      image:
        'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
    },
    {
      id: '5',
      title: '新课程标题',
      describe: '这是新的描述内容',
      time: '2024-07-15',
      image:
        'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
    },
    {
      id: '5',
      title: '新课程标题',
      describe: '这是新的描述内容',
      time: '2024-07-15',
      image:
        'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
    },
    {
      id: '5',
      title: '新课程标题',
      describe: '这是新的描述内容',
      time: '2024-07-15',
      image:
        'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
    },
    {
      id: '5',
      title: '新课程标题',
      describe: '这是新的描述内容',
      time: '2024-07-15',
      image:
        'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
    },
    {
      id: '5',
      title: '新课程标题',
      describe: '这是新的描述内容',
      time: '2024-07-15',
      image:
        'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
    },
    {
      id: '5',
      title: '新课程标题',
      describe: '这是新的描述内容',
      time: '2024-07-15',
      image:
        'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
    },
  ],
})

// 热门推荐
const getRecommendedCourse = (options: NVideoMoreListProps) => {
  console.log('下一页')
  propsOptions.currentPage!++
  setTimeout(() => {
    propsOptions.list = [
      ...propsOptions.list!,
      {
        id: '6',
        title: '新课程标题',
        describe: '这是新的描述内容',
        time: '2024-07-15',
        image:
          'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
      },
      {
        id: '6',
        title: '新课程标题',
        describe: '这是新的描述内容',
        time: '2024-07-15',
        image:
          'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
      },
      {
        id: '6',
        title: '新课程标题',
        describe: '这是新的描述内容',
        time: '2024-07-15',
        image:
          'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
      },
      {
        id: '6',
        title: '新课程标题',
        describe: '这是新的描述内容',
        time: '2024-07-15',
        image:
          'https://img95.699pic.com/desgin_photo/40178/9001_detail.jpg!detail860/fw/820/crop/0x0a0a1309/quality/90',
      },
    ]
    propsOptions.loadStatus = 'more'
  }, 1000)
}
// 自定义滚动到底部被触发
const onScrolltolower = () => {
  console.log('加载更多')
  propsOptions.loadStatus = 'loading'
  getRecommendedCourse(propsOptions)
}
</script>

<template>
  <scroll-view @scrolltolower="onScrolltolower" class="scroll-view" scroll-y>
    <view class="navbar">
      <!-- 搜索条 -->
      <view class="search">
        <text class="icon-search"></text>
        <input type="text" placeholder="搜索课程视频" v-model="search" />
      </view>
      <scroll-view class="scroll-tab" scroll-x>
        <uni-segmented-control
          class="scroll-tab-control"
          :current="current"
          :values="items"
          @clickItem="onClickItem"
          styleType="text"
          activeColor="#fc5d3c"
          inActiveColor="#999"
        ></uni-segmented-control>
      </scroll-view>
    </view>
    <view class="video-more-list">
      <NVideoMoreList :list="propsOptions.list" />
    </view>
    <uni-load-more :status="propsOptions.loadStatus"></uni-load-more>
  </scroll-view>
</template>

<style lang="scss">
@import '@/components/styles/NSearch.scss';

.scroll-view {
  height: 100%;
}

.navbar {
  position: fixed;
  z-index: 1;
  width: 100%;
}

.video-more-list {
  padding-top: 200rpx;
}

.segmented-control {
  width: 100vh !important;
}

.scroll-tab {
  padding: 20rpx 0 !important;
  white-space: nowrap !important;
}
</style>
